@extends('admin.layout._back')

@section('content')
    <section class="content" data-url="/admin/menu" v-cloak>
        <!--顶部搜索筛选-->
        <div class="row" @keyup.enter="getList">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-body form-inline">
                        <div class="form-group">
                            <input class="form-control input-sm" placeholder="菜单名称" v-model="search.keywords">
                        </div>
                        <div class="form-group">
                            <select class="form-control" v-model="search.status" @change="getList">
                                <option value="">全部</option>
                                <option v-for="(item, index) in status" :value="index">@{{ item }}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-sm btn-primary" type="button" @click="getList"><i class="fa fa-search"></i> 查询</button>
                        </div>
                        <div class="form-group">
                            <button @click="initSearch" class="btn btn-sm btn-default" type="button">
                                <i class="fa fa-eraser"></i> 清空查询
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-header">
                        <div>
                            <button type="button" class="btn btn-sm btn-primary" @click="showDataModal(false)"><i class="fa fa-plus"></i> 添加</button>
                        </div>
                    </div>
                    <div class="box-body table-responsive">
                        <table class="table table-hover table-bordered datatable" width="100%">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>菜单名称</th>
                                <th>Route</th>
                                <th>父级 ID</th>
                                <th>图标</th>
                                <th>排序</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in list">
                                <td>@{{ item.id }}</td>
                                <td>@{{ item.name }}</td>
                                <td>@{{ item.route }}</td>
                                <td>@{{ item.pid }}</td>
                                <td><i :class="'fa ' + item.icon"></i><span>(@{{ item.icon }})</span></td>
                                <td>@{{ item.sort }}</td>
                                <td>@{{ status[item.is_show] }}</td>
                                <td>
                                    <a :href="'/admin/project/' + item.id + '/edit'" class="btn btn-primary btn-xs" title="修改">
                                        <i class="fa fa-pencil"></i>
                                    </a>
                                    <a class="btn btn-danger btn-xs" @click="deleteData(item)">
                                        <i class="fa fa-trash"></i>
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="table-null" v-show="!list">暂无相关数据</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加/修改 -->
        <div class="modal fade" id="dataModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" v-if="flag == 0">添加菜单</h5>
                        <h5 class="modal-title" v-else>修改菜单</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal">
                            <div class="form-group col-lg-12">
                                <label class="control-label col-lg-2">父级</label>
                                <div class="col-xs-10">
                                    <select class="form-control" v-model="info.pid">
                                        <option value="0">无</option>
                                        <option v-for="item in list" :value="item.id">@{{ item.name }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-lg-12">
                                <label class="control-label col-lg-2">名称</label>
                                <div class="col-xs-10">
                                    <input type="text" class="form-control" placeholder="菜单名称" v-model="info.name">
                                </div>
                            </div>
                            <div class="form-group col-lg-12">
                                <label class="control-label col-lg-2">路由</label>
                                <div class="col-xs-10">
                                    <input type="text" class="form-control" placeholder="路由地址" v-model="info.route">
                                </div>
                            </div>
                            <div class="form-group col-lg-12">
                                <label class="control-label col-lg-2">图标</label>
                                <div class="col-xs-10">
                                    <input type="text" class="form-control" placeholder="选择图标" v-model="info.icon">
                                </div>
                            </div>
                            <div class="form-group col-lg-12">
                                <label class="control-label col-lg-2">排序</label>
                                <div class="col-xs-10">
                                    <input type="text" class="form-control" placeholder="排序值" v-model="info.sort">
                                </div>
                            </div>
                            <div class="form-group col-lg-12">
                                <label class="control-label col-lg-2">是否显示</label>
                                <div class="col-xs-10">
                                    <input type="checkbox" class="form-check-input" v-model="info.is_show">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" @click="submitData">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@stop

@section('footer_js')
    <script type="text/javascript">
        new Vue({
            el: ".content",
            data: {
                flag: 0,
                info: {},
                list: [],
                search: {},
                status: {0: '隐藏', 1: '显示'}
            },
            mounted: function () {
                that = this;

                // 初始化查询
                this.initInfo();
                this.initSearch();
            },
            methods: {
                initInfo: function() {
                    this.flag = 0;
                    this.info = {id: 0, pid: 0, name: '', sort: 0, icon: '', route: '', is_show: 0};
                },
                initSearch: function() {
                    this.search = {p: 1, l: 10, status: '', keywords: ''};

                    // 重新获取列表数据
                    this.getList();
                },
                getList: function() {
                    this.$http.post('/admin/menus', this.search, {
                        emulateJSON: true,
                        'headers': {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    }).then(function(res){
                        that.list = res.body.data.list;
                    }, function(res){
                        layer.msg(res.statusText);
                    });
                },
                deleteData: function(info) {
                    layer.confirm('确定要删除【<span class="text-orange">' + info.name + '</span>】？', {
                        btn: ['确定','关闭']
                    }, function(){
                        that.$http.delete('/admin/project/' + info.id, {
                            emulateJSON: true,
                            'headers': {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            }
                        }).then(function(res){
                            layer.msg(res.body.message);
                            if(parseInt(res.body.code) === 200) {
                                that.getList();
                            }
                        }, function(res){
                            layer.msg(res.statusText);
                        });
                    });
                },
                showDataModal: function(info) {
                    if(info !== false) { // 新增
                        this.initInfo();
                    } else { // 修改
                        this.flag = 1;
                    }

                    $('#dataModal').modal('show');
                },
                submitData: function() {},
            }
        });
    </script>
@stop
